import { createApp } from 'vue'
import type { Component, App as VueApp } from "vue"
import App from './App'
import { mountRouterGuard, router as Router } from '@/router';
import { initProjectLogics } from '@/logics'
import ElementPlus from 'element-plus'
import Store from '@/store'

import '@/assets/css/style.css'
import 'element-plus/dist/index.css'

interface VuePlugin {
    name: string,
    value: any
}

class InitApp {
    
    private _APP: Nullable<VueApp<Element>>  = null;

    readonly vuePluginList: VuePlugin[] = [
        { name: 'router', value: Router },
        { name: 'pinia', value: Store },
        { name: 'elementPlus', value: ElementPlus }
    ]
    constructor(app: Component) {
        this._APP = createApp(app)
        this.init()
    }
    //初始化
    init() {
        try {
            this.useAppPlugin()
            this.buildAppHandle()
            this.start()
        } catch (err: any) {
            throw new Error(err.message || err)
        }

    }
    useAppPlugin() {
        //挂载官方插件
        try {
            this.vuePluginList.forEach(plugin => {
                this._APP?.use(plugin.value)
            });
        } catch {
            throw new Error('挂载官方插件失败')
        }
    }
    buildAppHandle() {
        try {
           // 项目启动逻辑
           initProjectLogics(this._APP)
            //路由守卫
            mountRouterGuard()
        } catch (err: any) {
            throw new Error(err.message || err)
        }
    }
    start() {
        //挂载页面
        try {
            this._APP?.mount('#app')
        } catch (err: any) {
            throw new Error('挂载页面失败')
        }
    }

}

new InitApp(App)